<template>
	<view class="">
		<view class="u-padding-20">
			<u-form :model="form" ref="uForm" label-width="160">
			
				<u-form-item label="商品分类" prop="work_id" @click="sortshow=true">
					<u-input @click="sortshow=true" v-model="form.goods_classify_name" type="select" disabled
						placeholder="点击选择商品分类" />
				</u-form-item>
				<u-form-item label="名称" prop="title">
					<u-input v-model="form.goods_name" placeholder="请输入名称" />
				</u-form-item>
				<u-form-item label="价格" prop="contacts">
					<u-input v-model="form.price" placeholder="请输入价格" />
				</u-form-item>
			
				<u-form-item label="商品内容" label-position="top">
					<u-input :customStyle="{background:'#f7f7f7',padding:'20rpx'}" v-model="form.detail"
						type="textarea" placeholder="请输入商品内容" />
				</u-form-item>
				
				
				<u-form-item label="添加图片" label-position="top" prop='images'>
					<w-upload :Number='1' v-model="form.images"  width="300"></w-upload>
				</u-form-item>

			</u-form>
		</view>

		<view style="width: 90%;margin: 40rpx auto;">
			<u-button @click="submit" type="primary" shape="circle">提交</u-button>
		</view>


		<u-select child-name="child" value-name="id" label-name="classifyName" v-model="sortshow" mode="mutil-column-auto"
			:list="sortList" @confirm="sortConfirm"></u-select>


		<u-toast ref="uToast" />


	</view>
</template>

<script>
	import wxpay from '@/common/wxpay.js';
	export default {
		data() {
			return {
				
				sortList:[],
sortshow:false,
				form: {
					id:'',
				   goods_classify_id:'',
				   goods_classify_name:'',
				   goods_name:'',
				   price:'',
				   detail:"",
				},
				rules: {
					goods_classify_name:[{
						required: true,
						message: '请选择商品分类',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					detail:[{
						required: true,
						message: '请输入工作地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					price: [{
						required: true,
						message: '请输入价格',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					goods_name: [{

						required: true,
						message: '请输入名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

				}
			};
		},
		onLoad(options) {
			if(options.id){
				this.form.id=options.id
				this.detail()
			}
			
			this.getsortList()
		},
		methods: {
			
			detail(){
				this.$u.post('/index/goodsDetail', {
					goods_id:this.form.id
				}).then(res => {
					let {images,detail,goodsName,price,goodsClassifyId,classifyName}=res;
					
					this.form.images = images.join(',');
					this.form.detail = detail;
					this.form.goods_name = goodsName;
					this.form.goods_classify_id = goodsClassifyId;
					this.form.price = price;
					this.form.goods_classify_name = classifyName;
					
				}).catch(err => {
				
				})
				
			},
			
			sortConfirm(e) {
				let label = e[1].label;
				let value = e[1].value;
				this.form.goods_classify_id = value;
				this.form.goods_classify_name = label;
				
			},
			getsortList() {
				this.$u.post('/index/goodsClassify', {}).then(res => {
					this.sortList = res;
				}).catch(err => {

				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/user/goodsEdit', this.form).then(res => {
							this.$refs.uToast.show({
								title: '发布成功',
								type: 'success',
								back: true
							})
						}).catch(err => {
                              
                              							
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>


<style scoped>

</style>
